/*
自带超链接响应速度要经过2s 自带title属性值才会出现
改进：鼠标移出超链接的那一瞬间就出现title提示

思路：
//难点：移入移出两个事件怎么使用公共变量，可以在这个操作对象上绑定公共变量。供不同事件调用。
// 不过这不是最好的方法，自己去找更简单的方法。

当鼠标划入超链接时候创建一个div元素，div元素内容是title属性值
将创建的div加入到文档中
为div改变位置 ，设置x,y坐标值，让div出现在鼠标旁边的位置
鼠标移出 删除div元素
出现的两个问题
自带提示消除，
位置微调
*/

$(function () {
    let x = 10,
        y = 20
    $('.tooltip').mouseenter(function (e) {
        // this表示$('.tooltip')类数组里面的当前操作dom对象
        // 消除自身title属性值 
        // e.pageY属性是鼠标指针的位置，相对于文档的上边缘。
        $('<div class="msg"></div>').text($(this).attr('title')).appendTo($('body'))
        $('.msg').css({ left: e.pageX+20, top: e.pageY+10 })

        // 消除自带提示
        $(this).attr('title', (index, value) => {
            $(this).attr('mytitle', value)//给当前操作的ahtml结构上自定义一个mytitle属性，用来保存title值，
            return ''
        })
    }).mouseleave(function () {
        $('.msg').remove()
        $(this).attr('title', $(this).attr('mytitle'))
    })
})

